<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>用户列表</span>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="#" />
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="nickname" label="姓名" />
            <el-table-column prop="sex" label="性别" />
            <el-table-column prop="name" label="状态">
                <template #default="scope">
                    <el-tag v-if="tableData[scope.$index].usable==1" class="ml-2" type="success">开启</el-tag>
                    <el-tag v-if="tableData[scope.$index].usable==0" class="ml-2" type="info" plain>禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" >
                <template #default="scope">
                    <!-- <el-space>          -->
                            <el-button v-if="tableData[scope.$index].usable==1" @click="handleOff(scope.row.id,scope.$index)" type="info" size="small">
                                禁用
                            </el-button>      
                            <el-button v-if="tableData[scope.$index].usable==0" @click="handleOpen(scope.row.id,scope.$index)" type="success" size="small" >
                                启用
                            </el-button>   
                        <el-button @click="handleRemove(scope.row.id,scope.$index)" size="small" type="danger">
                            删除
                        </el-button>
                    <!-- </el-space> -->
                </template>
            </el-table-column>
        </el-table>
    </el-card>

</template>
<script setup>
import { toRefs, reactive, ref, computed, onMounted, onUpdated } from 'vue';
import User from '@/api/user';
// import { id } from 'element-plus/es/locale';
// import { ElMessageBox } from 'element-plus';
const tableData = ref([]);
async function loadList() {
    let { status, msg, total, data } = await User.list();
    if (status) {
        tableData.value = data;
    
    }
}
loadList();

function handleOff(id, i) {
    ElMessageBox.confirm('确定禁用？', '确认', { type: 'error', cancelButtonText: '取消', confirmButtonText: '确认' })
        .then(async () => {
            //点击确认
            //发送ajax
            let{status,msg} = await User.off({id:id,usable:0});
         if(status){

            tableData.value[i].usable=0
            ElMessage.success(msg);
         }else{
            //错误提示
            ElMessage.error(msg);
         }
        })
        //取消
        .catch(() => {
            //取消
            ElMessage.info('取消成功');
        });
}
function handleOpen(id, i) {
    ElMessageBox.confirm('确定开启？', '确认', { type: 'error', cancelButtonText: '取消', confirmButtonText: '确认' })
        .then(async () => {
            //点击确认
            //发送ajax
            let{status,msg} = await User.open({id:id,usable:1});
         if(status){
            tableData.value[i].usable=1

            ElMessage.success(msg);

         }else{
            //错误提示
            ElMessage.error(msg);
         }
        })
        //取消
        .catch(() => {
            //取消
            ElMessage.info('取消成功');
        });
}


//删除操作
function handleRemove(id, i) {
    ElMessageBox.confirm('确定要删除？', '确认删除', { type: 'error', cancelButtonText: '取消', confirmButtonText: '确认' })
        .then(async () => {
            //点击确认
            //发送ajax
            let { status, msg } = await User.remove({ id })
            if (status) {
                ElMessage.success(msg);
                //操作DOM
                tableData.value.splice(i, 1);
            } else {
                ElMessage.error(msg);
            }
        })
        //取消
        .catch(() => {
            //取消
            ElMessage.info('取消成功');
        });
}
</script>
<style lang="less">

</style>